<template>
  <div>
    <ul class="com-admin-web-me-video">
      <li v-for="(v, k) in videos" :key="v" class="item-box">
        <video :src="v" class="video" controls="controls">您的浏览器不支持 video 标签。</video>
        <a-icon type="delete" class="remove-icon w-pointer" @click="removeClick(k)" />
      </li>
      <video-up ref="VideoUp" @success="upSuccess" />
    </ul>
  </div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import VideoUp, { VideoUpType } from "@/components/global/fileUp/video";

@Component({
  name: "ComAdminWebMeVideo",
  components: {
    VideoUp,
  },
})
export default class ComAdminWebMeVideo extends Vue {
  @Prop({ type: Array, default: () => [] }) defVideos!: Array<string>;

  // 视频数组
  videos: Array<string> = [];

  created() {
    this.videos = this.defVideos;
  }

  upSuccess(url: string) {
    this.videos.push(url);
    (this.$refs.VideoUp as VideoUpType).clearData();
  }

  /**
   * 删除按钮点击
   */
  removeClick(index: any) {
    this.videos.splice(index, 1);
  }

  getData() {
    return this.videos;
  }
}
</script>

<style scoped lang="less">
.com-admin-web-me-video {
  display: flex;
  flex-wrap: wrap;
  .item-box {
    width: 200px;
    height: 200px;
    border: 1px dashed #ddd;
    border-radius: 6px;
    margin-right: 24px;
    margin-bottom: 24px;
    position: relative;
    .video {
      width: 100%;
      height: 100%;
    }
    .remove-icon {
      position: absolute;
      right: 0;
      top: 0;
      font-size: 24px;
      color: #ccc;
    }
  }
  .item-box:hover {
    .remove-icon {
      color: #f00;
    }
  }
}
</style>
